<template>
	<!--填写报名信息组件-->
	<div class="apply-info-box" v-if="isStart">
	    <div class="apply-info-header">
        <div v-if="isShowYinSi" class="yinsi" @click="seeYinsi">
          <img src="@/assets/images/zxjt/shuoming.png" alt="">
          <span>隐私政策</span>
        </div>
			   <span>{{applyInfo.theme}}</span>
			   <i @click="closeApplyInfo"></i>
			</div>
			<div class="apply-info-tip">
				<p v-if="applyInfo.status == 2">已结束填写</p>
				<p v-else>截至<span>{{applyInfo.endTimeType == 1? `${applyInfo.endTime}前 ` :'直播结束 '}}</span>支持修改信息</p>
			</div>
			<div class="apply-info-main">
               <p class="apply-info-input" :class="{'star-box':v.checked ,'input-address':v.key=='address'} " v-for="v in applyInfo.items" :key="v.id">
				   <span>{{v.value}}</span>
				   <textarea v-if="v.key=='address'" type="text" v-model="v.inputValue" :placeholder="v.inputDesc || '请填写省、市、区以及详细的收货地址'"></textarea>
				   <input v-else :class="['name','mobile'].includes(v.key) ?'short-input':''" type="text"  v-model="v.inputValue" :placeholder="v.inputDesc || `请输入${v.value}`">
				</p>

			</div>
			<div class="submit" :class="applyInfo.status == 2?'submit-end':''" @click="submitInfo">{{applyInfo.status == 2?'关闭':'提交'}}</div>
			<div class="wenxin-tips">{{applyInfo.desc || ''}}</div>
	</div>
</template>

<script>
import fun from "../util/function";
	export default {
		props: {
			roomInfo:Object,
			videoInfo:Object,

		},
		data() {
			return {
                applyInfo:{},//报名信息
				isStart:false,//活动是否开始
        getPlatform:fun.getPlatform(),
        isShowYinSi:true,//是否展示隐私政策
			}
		},
		created() {
      if(this.$channel == 'zxjtqh'){
        if(this.getPlatform!='wx'){
            this.isShowYinSi = false //中信建投期货 只有微信展示
        }
      };
			this.getApplyList();
		},
		mounted(){
		},
		methods: {
      seeYinsi(){
        this.$parent.isPrivacy = true;
      },
			//提交
			submitInfo(){
				if(this.applyInfo.status == 2) {
					this.closeApplyInfo()
					return //结束
				}
				let applyInfoList = this.applyInfo.items
				for(let i =0 ;i<applyInfoList.length;i++){
					if(applyInfoList[i].checked){//校验
					   if (!applyInfoList[i].inputValue) {
							fun.toastMessage('请填写' + applyInfoList[i].value);
							return
						}
						 if (applyInfoList[i].key == 'mobile') {
								let phoneNum = applyInfoList[i].inputValue;
								const reg = /^1[0-9]{10}$/;
								if (!reg.test(phoneNum)) {
								fun.toastMessage('请填入正确的手机号码')
								return
								}
							}
				 }
				}
				this.dataSave();
			},
			//关闭
			closeApplyInfo(){
				this.$emit('formChildMsg', {
				type: 'closeApplyInfo',
				data: {
					'Msg': '报名中奖信息填写'
				}
				})
			},
			//获取报名信息
            getApplyList(){
				let roomId = this.roomInfo ? this.roomInfo.roomInfo.roomId : this.videoInfo.videoInfo.roomId
				this.$http.get("/h5live/checkIn/configWithData?elementId="+roomId+"&elementType="+1).then(res => {
						if(res.data.code == "000000" && res.data.data !== null) {
							this.isStart = true
							this.applyInfo = res.data.data
						} else if(res.data.code == "500501"){
							fun.toastMessage('暂未开启');
							this.closeApplyInfo();
						}else{
							console.log('获取中奖用户信息',res.data)
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			//保存数据
			dataSave(){
				this.$http.post("/h5live/checkIn/dataSave", this.applyInfo, {headers: {"Content-Type": "application/json"}}).then(
					res => {
						if (res.data.code == "000000") { //报名成功
							fun.toastMessage('提交成功');
							this.closeApplyInfo();
						}
						},
						err => {
							console.log(err);
						}
						);

			}
		}
	}
</script>

<style scoped="scoped">
.apply-info-box{
	position: absolute;
	bottom: 0;
	width: 100vw;
	max-height: calc(100vh * 3/4);
	overflow-y: auto;
    background: #FFFFFF;
	z-index: 1501;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.apply-info-header{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 34px 28px;
   background: linear-gradient(180deg, #FFE2E2 0%, #FFFFFF 38%);
}
/* .apply-info-header::before{
	content:"";
	height: 48px;
	width: 48px;
} */
.apply-info-header span{
	font-size: 36px;
	font-weight: 500;
	color: #333333;
	line-height: 50px;
}
.apply-info-header i{
	height: 48px;
	width: 48px;
	background: url('../assets/images/zxyh-close.png') no-repeat;
	background-size: 100% 100%;
}
.apply-info-tip{
	font-size: 28px;
	font-weight: 400;
	color: #E8340A;
	text-align: center;
}
.apply-info-tip span{
	border-bottom: 1px solid #E8340A;
	margin-left: 8px;
}
.apply-info-main{
	padding-top: 30px;
}
.apply-info-input{
	display: flex;
	flex-direction: row;
	align-items: center;

}
.apply-info-input span{
	width: 168px;
	margin-right: 20px;
	text-align: right;
    font-size: 30px;
	font-weight: 400;
	color: #333333;
	line-height: 42px;
}
.apply-info-input.star-box span::before{
	content: '*';
	margin-right: 8px;
	font-size: 30px;
	font-weight: 500;
	color: #E8340A;
}
.apply-info-input .short-input{
	width: 350px;
}
.apply-info-input input,.apply-info-input textarea{
    width: 506px;
	height: 68px;
	margin: 15px 0;
	padding-left: 16px;
	border-radius: 6px;
	border: 1px solid #ACACAC;
	line-height: 38px;
}
.apply-info-input.input-address{
	align-items: flex-start;
}
.apply-info-input.input-address span{
	margin-top: 25px;
}
.apply-info-input.input-address textarea{
    height: 166px;
	padding-top: 17px;
}

.apply-info-input input::placeholder,textarea::placeholder{
    font-size: 26px;
    color: #DBDBDB;
}
.submit{
    width: 438px;
	height: 77px;
	margin: 35px auto;
	background: linear-gradient(180deg, #FF9393 0%, #FF1010 100%);
	border-radius: 39px;
	border: 1px solid #FFD59A;
	text-align: center;
	line-height: 77px;
	font-size: 34px;
	font-weight: 500;
	color: #FFFFFF;
}
.submit-end{
    background: linear-gradient(180deg, #D9D9D9 0%, #818181 100%);
	border: none;
}
.wenxin-tips{
	padding: 10px 30px 80px;
	font-size: 24px;
	font-weight: 400;
	color: #999999;
	line-height: 33px;
	text-align: center;
}
  .yinsi{
    display: flex;
    vertical-align: middle;
  }
  .yinsi span{
    font-size: 24px !important;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #C9161D;
    line-height: 33px;
  }
  .yinsi img{
    width: 24px;
    height: 24px;
    margin-right: 5px;
    margin-top: 5px;
  }
</style>
